<template>
  <div>
    <el-container class="admin-container">
      <el-aside :style="obj">
        <div class="logo">
          <h1>{{ !isCollapse ? '博客后台管理系统' : '后台' }}</h1>
        </div>
        <el-menu :collapse="isCollapse" :collapse-transition="false" router background-color="#304156" text-color="#bfcbd9" active-text-color="#409EFF">
          <el-menu-item index="/admin/home">
            <i class="el-icon-s-home"></i>
            <template slot="title">
              <span>首页</span>
            </template>
          </el-menu-item>
          <el-submenu index="/admin/article">
            <template #title>
              <i class="el-icon-menu"></i>
              <span>博客管理</span>
            </template>
            <el-menu-item index="/admin/article">所有博客</el-menu-item>
          </el-submenu>
          <el-submenu index="/admin/category">
            <template #title>
              <i class="el-icon-s-data"></i>
              <span>博客分类</span>
            </template>
            <el-menu-item index="/admin/category">所有分类</el-menu-item>
          </el-submenu>
          <el-submenu index="/admin/leavewords">
            <template #title>
              <i class="el-icon-s-comment"></i>
              <span>留言管理</span>
            </template>
            <el-menu-item index="/admin/leavewords">所有留言</el-menu-item>
          </el-submenu>
          <el-submenu index="/admin/user">
            <template #title>
              <i class="el-icon-s-custom"></i>
              <span>用户管理</span>
            </template>
            <el-menu-item index="/admin/user">用户列表</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <i :class="['el-icon-s-fold', isCollapse ? 'isCollapse' : '']" @click="isCollapseClick"></i>
          <el-dropdown trigger="click">
            <span>
              <el-avatar :size="50" :src="avatar"></el-avatar>
              <i class="el-icon-caret-bottom"></i>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item >修改密码</el-dropdown-item>
                <el-dropdown-item divided @click.native.prevent="logout"> 退出登录 </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-header>
        <el-main><router-view></router-view></el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import avatar from '../assets/logo.png'
export default {
  name: 'MyHome',

  data() {
    return {
      isCollapse: false,
      obj: {
        width: '200px'
      },
      avatar: avatar
    }
  },
  created() {},
  mounted() {},

  methods: {
    isCollapseClick() {
      this.isCollapse = !this.isCollapse
      if (this.isCollapse) {
        this.obj.width = '64px'
      } else {
        this.obj.width = '200px'
      }
    },
    logout() {
      localStorage.removeItem('token')
      localStorage.removeItem('ismanager')
      this.$message({
        type: 'success',
        message: '退出成功',
        duration: 500
      })
      this.$router.push('/login')
    },
    
  }
}
</script>

<style scoped>
.el-aside {
  background-color: #304156;
  color: #bfcbd9;
}

.el-header {
  justify-content: space-between;
  display: flex;
  align-items: center;
  background-color: #fff;
  font-size: 25px;
  color: #000;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.el-header i {
  transition: all 0.5s;
}
.isCollapse {
  transform: rotate(-180deg);
}
.el-mian {
  background-color: #eee;
}
.admin-container {
  height: 100vh;
}
.logo {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.el-dropdown i {
  font-size: 10px;
  color: #5a5e66;
}
</style>
